<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员卡预览</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <section>
        <h1>会员卡基础信息</h1>
        <div class="content">
          <ul class="card-list-img clearfix">
            <li v-for="item in rightsLook.memberCard"
              :key="item.classId">
              <img :src="item.imgMin"
                alt="">
              <p class="text hotel-name">{{memberInfo.name}}</p>
              <p class="text card-name">{{item.name}}</p>
              <p class="text card-num">No: 0000 0000 0000</p>
            </li>
          </ul>
          <div class="info clearfix">
            <span class="fl name">特权介绍</span>
            <div class="fl"
              style="width:80%">
              <p v-for="(item,index) in memberInfo.content"
                :key="index">{{item}}</p>
            </div>
          </div>
          <div class="info clearfix">
            <span class="fl name">使用须知</span>
            <div class="fl"
              style="width:80%">
              <p v-for="(item,index) in memberInfo.useContent"
                :key="index">{{item}}</p>
            </div>
          </div>
          <div class="info clearfix">
            <span class="fl name">服务电话</span>
            <div>{{memberInfo.phone}}</div>
          </div>
        </div>
      </section>
      <section>
        <h1>会员等级</h1>
        <div class="content">
          <table class="custom"
            v-if="memberClass.length">
            <tr class="style">
              <th>
                会员等级 ({{memberClass.length}}/10)
              </th>
              <th>
                等级名称
              </th>
              <th v-if="openNight==1">
                消费间夜成长值
              </th>
              <th v-if="openIntegral==1">
                累计积分成长值
              </th>
              <th v-if="openPay==1">
                付费直升
              </th>
            </tr>
            <tr v-for="(item,index) in memberClass"
              :key="index">
              <td>{{item.num}}</td>
              <td>{{item.name}}</td>
              <td v-if="openNight==1">{{item.night}}</td>
              <td v-if="openIntegral==1">{{item.integral}}</td>
              <td v-if="openPay==1">{{item.pay}}</td>
            </tr>
          </table>
          <div style="text-align:center"
            v-if="!memberClass.length">暂无数据</div>
        </div>
      </section>
      <section>
        <h1>会员权益</h1>
        <div class="content">
          <table class="custom">
            <tr class="style">
              <th>
                会员权益/会员卡
              </th>
              <th v-for="item in rightsLook.memberCard"
                :key="item.classId">
                <p>{{item.name}}</p>
              </th>
            </tr>
            <tr v-for="(item,index) in rightsPull"
             v-if="item.length"
              :key="index">
              <td>
                {{renderName(item[0].type)}}
              </td>
              <td v-for="(i,s) in rightsLook.memberCard"
                :key="i.classId"
                v-if="index ==='custom'">
                <p v-for="(item,index) in rightsLook[index][s]"
                  :key="index"
                  style="padding: 5px">{{item}}</p>
              </td>
              <td v-for="(i,s) in rightsLook.memberCard"
                :key="i.classId"
                v-if="index!=='custom'">
                {{rightsLook[index][s]}}
              </td>
            </tr>
          </table>

        </div>
      </section>
    </div>
  </div>
</template>

<script>
import {
  memberPreview,
  getMemberCardInfo,
  memberEquityPull
} from "@/public/js/member";
export default {
  components: {},
  props: {},
  data() {
    return {
      memberClass: [],
      rightsLook: [],
      rightsPull: [],
      memberInfo: "",
      openNight: 1,
      openIntegral: 1,
      openPay: 1
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取会员卡预览数据
    _memberPreview() {
      memberPreview().then(res => {
        this.memberClass = res.data.memberClass ? res.data.memberClass : [];
        if (!this.memberClass.length) {
          this.openNight = 2;
          this.openIntegral = 2;
          this.openPay = 2;
        } else {
          let data = this.memberClass[0];
          this.openNight = data.openNight;
          this.openIntegral = data.openIntegral;
          this.openPay = data.openPay;
        }
        this.rightsLook = res.data.rightsLook;
      });
    },
    //获取会员卡基本信息
    _getMemberCardInfo() {
      getMemberCardInfo().then(res => {
        this.memberInfo = res.data.memberInfo;
        this.memberInfo.content = this.memberInfo.content.split("\n");
        this.memberInfo.useContent = this.memberInfo.useContent.split("\n");
      });
    },
    //获取会员权益下拉数据
    _memberEquityPull() {
      memberEquityPull().then(res => {
        this.rightsPull = res.data.rightsPull;
      });
    },
    renderName(type) {
      switch (type) {
        case 1:
          return "房价";
          break;
        case 2:
          return "预留房间";
          break;
        case 3:
          return "延迟退房";
          break;
        case 4:
          return "免押金";
          break;
        case 5:
          return "免查房";
          break;
        case 6:
          return "自定义";
          break;
        default:
          return "";
      }
    }
  },
  created() {
    this._memberPreview();
    this._getMemberCardInfo();
    this._memberEquityPull();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  section {
    font-size: 14px;
    padding: 0 30px;
    h1 {
      font-size: 16px;
      text-align: left;
      color: #6d2377;
      padding: 15px 0;
    }
    .content {
      padding-left: 15px;
    }
    .card-list-img {
      li {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 250px;
        height: 150px;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
        & > img {
          vertical-align: top;
          width: 100%;
        }
        & > .text {
          position: absolute;
          color: #fff;
          font-size: 12px;
          &.hotel-name {
            top: 10px;
            left: 10px;
          }
          &.card-name {
            top: 30px;
            left: 10px;
            font-size: 16px;
            font-weight: bold;
          }
          &.card-num {
            bottom: 20px;
            left: 10px;
          }
        }
      }
    }
    .info {
      padding-bottom: 20px;
      .name {
        font-size: 14px;
        color: #6d2377;
        margin-right: 20px;
      }
    }
  }
  .textarea {
    & > textarea {
      border: none;
      border: none;
    }
  }
}
</style>